<template>
  <div id="app">
      <div class="header">
          <span>心动的店</span>
          
      </div>
      <div class="main">
          <div class="left">
              <ul>
                <li v-for="(item,index) in pro" :key="index" @click="check(item.id)">{{item.name}}</li>
              </ul>
          </div>
          <div class="right">
              <el-list v-for="(item,index) in list" :key="index"
                :title='item.title'
                :url='item.url'
                :price='item.price'
                :num='item.num'
                :id='item.id'
              >
                 <el-count></el-count>
              </el-list>
          </div>
           <el-alert v-show="isShow" @close='close' :buyList='buyList'></el-alert>
      </div>
     
      <div class="footer">
          <span>数量{{ totalnum}}</span>
          <span>价格{{totalPri}}</span>
          <span  @click="examine">查看</span>
      </div>
    
  </div>
</template>

<script>
import elList from './components/elList'
import elAlert from './components/elAlert'
export default {
  name: 'App',
  data(){
    return {
        pro:[],
        list:[],
        buyList:[],
        id:1,
        isShow:false,
        
    }
  },
  components:{
    elList,
    elAlert
  },
  created(){   
    
   
    this.bus.$on('add',(id)=>{
      
        let index=this.list.findIndex((item)=> item.id === id);
        
       
        if( this.buyList.findIndex((ele)=> ele.id === id) == -1 ){
            this.buyList.push(this.list[index]);
        }
        
        this.list[index].num++; 
       
        
       
    })

    this.bus.$on('noadd',(id)=>{
          
         let index=this.list.findIndex((item)=> item.id === id);
        
         this.list[index].num--;
        
         if(this.list[index].num < 1){
          
            let el=this.buyList.findIndex((ele)=> ele.id == id);
            this.buyList.splice(el,1);
         }
         
        
    })

    this.$http.get('/api/getTitle').then(res=>{
      if(res.data.code === 1){
          this.pro = res.data.data;
      }
    }) 
    this.getdata(this.id);
  
  },
  computed:{
      totalnum(){  
        let nums=0;
        this.buyList.forEach((element)=>{
          nums+=element.num;
        })
        //console.log(nums)
        return nums;
      },
      totalPri(){
        let sum=0;
        this.buyList.forEach((item)=>{
          sum+=item.price*item.num;
         
        })
         return sum;
      }
  },
  methods:{
      examine(){
        this.isShow = !this.isShow;
      },
      
      getdata(id){
          this.$http.get('/api/getList').then(res=>{
            if(res.data.code === 1){
              this.list = res.data.data.filter((item) =>{
                  item.num = 0;
                  
                  this.buyList.forEach(element => {
                      if(item.id == element.id){
                        console.log(item.num)
                           item.num = element.num ;
                      }
                    
                  });
                  
                  return item.type == this.id 
              } );

            }
        })
       
      },
      check(id){  
        this.id = id;
        this.getdata(id);
      },
      close(){
          this.isShow = false;  
      },

      
  }
}
</script>

<style lang='scss'>
    *{
      margin: 0 auto;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
    }
    body,html{
      width: 100%;
      height: 100%;
    }
    #app{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .main{
      width: 100%;
      height: 100%;
      display: flex;
      flex: 1;
      .left{
          width: 25%;
          height: 100%;
          background: pink;
          ul{
            width: 100%;
            height: 100%;
            li{
              width: 100%;
              height: 50px;
              line-height: 50px;
              padding: 0 3px;
            }
            
          }
      }
      .right{
           width: 75%;
          height: 100%;
          background: burlywood;
      }
    }
    .header,.footer{
      width: 100%;
      height: 50px;
      background: orange;
      line-height: 50px;
    }
</style>
